<template>
  <div class="detail">
    <!-- 导航 -->
    <DetailNavBar @titleClick="titleClick" ref="detailNav" />
    <!-- 重构滑动功能 -->
    <scroll
      class="content"
      ref="scroll"
      :probe-type="3"
      @scroll="contentScroll"
    >
      <!-- 轮播 -->
      <detail-swiper :top-images="topImages" />
      <!-- 商品信息 -->
      <detail-base-info :goods="goods" />
      <!-- 售后信息 -->
      <detail-shop-info :shop="shop" />
      <!-- 商品详情 -->
      <detail-goods-info
        :goods-info="detailInfo"
        @imgLoad="imaLoad"
        :class="{ show: isRander }"
      />
      <!-- 商品尺码表 -->
      <detail-params-info :params-info="paramsInfo" ref="paramsInfo" />
      <!-- 商品评论 -->
      <detail-comment-info :comment-info="commentInfo" ref="comment" />
      <!-- 商品推荐 -->
      <detail-recommend-title ref="recommend" :class="{ show: isRander }" />
      <goods-list :goods="recommend" />
    </scroll>
    <detail-bottom-nav @addToCart="addCart" />
    <!-- 返回顶部 -->
    <back-top @click.native="backClick" v-show="isShowBkTop" />
  </div>
</template>

<script>
//组件模块
import DetailNavBar from './childComps/DetailNavBar'
import DetailSwiper from './childComps/DetailSwiper'
import DetailBaseInfo from './childComps/DetailBaseInfo'
import DetailShopInfo from './childComps/DetailShopInfo'
import DetailGoodsInfo from './childComps/DetailGoodsInfo'
import DetailParamsInfo from './childComps/DetailParamsInfo'
import DetailCommentInfo from './childComps/DetailCommentInfo'
import DetailRecommendTitle from './childComps/DetailRecommendTitle'
import DetailBottomNav from './childComps/DetailBottomNav'

//网络模块
import {
  goodsDetail,
  Goods,
  Shop,
  GoodsParam,
  getRecommend
} from 'network/detail'

//公用组件
import Scroll from 'components/common/scroll/Scroll'
import GoodsList from 'components/content/goods/GoodsList'

//公用工具
import { itemImglistener, backTop } from 'common/mixin'

export default {
  name: 'Detail',
  components: {
    //子组件
    DetailNavBar,
    DetailSwiper,
    DetailBaseInfo,
    DetailShopInfo,
    DetailGoodsInfo,
    DetailParamsInfo,
    DetailCommentInfo,
    DetailRecommendTitle,
    DetailBottomNav,
    // 公用组件
    GoodsList,
    Scroll
  },
  data() {
    return {
      iid: null,
      topImages: [],
      goods: {},
      shop: {},
      detailInfo: {},
      paramsInfo: {},
      commentInfo: {},
      recommend: [],
      offsetTopY: [],
      isRander: false,
      currentIndex: 0
    }
  },
  methods: {
    // 图片加载完毕后
    imaLoad() {
      // 圖片加載完,更新一次滾動高度
      this.$refs.scroll.refresh()
      // 讓附加東西展示,避免頁面數據沒加載,就出現了樣式,然後閃一下
      this.isRander = true
      // 獲取個主題的偏移高度
      this.offsetTopY.push(0)
      this.offsetTopY.push(this.$refs.paramsInfo.$el.offsetTop)
      this.offsetTopY.push(this.$refs.comment.$el.offsetTop)
      this.offsetTopY.push(this.$refs.recommend.$el.offsetTop)
      this.offsetTopY.push(Number.MAX_VALUE)
    },
    // 點擊跳轉目標主題位置
    titleClick(index) {
      this.$refs.scroll.scrollTo(0, -this.offsetTopY[index], 500)
    },
    // 動態加載導航欄激活樣式
    contentScroll(p) {
      const topY = -p.y
      let length = this.offsetTopY.length

      // 0~length-1都需要判斷兩次,大於自己,小於下一個
      // 最後一個只需要判定大於自己的高度就行,因為後面沒有了

      //只有在i不是自己的索引的時候才觸發,不然
      // for (let i = 0; i < length; i++) {
      //   if (
      //     (this.currentIndex !== i &&
      //       i < length - 1 &&
      //       topY >= this.offsetTopY[i] &&
      //       topY < this.offsetTopY[i + 1]) ||
      //     (this.currentIndex !== i &&
      //       i === length - 1 &&
      //       topY >= this.offsetTopY[i])
      //   ) {
      //     this.currentIndex = i
      //     this.$refs.detailNav.currentIndex = i
      //   }
      // }
      for (let i = 0; i < length - 1; i++) {
        if (
          this.$refs.detailNav.currentIndex !== i &&
          topY >= this.offsetTopY[i] &&
          topY < this.offsetTopY[i + 1]
        ) {
          this.$refs.detailNav.currentIndex = i
        }
      }
      //判断是否展示返回顶部按钮
      this.goBackTop(p)
    },
    //监听添加购物车按钮
    addCart() {
      // 1.保存数据,发送至Vuex中进行管理
      const product = {}
      product.image = this.topImages[0]
      product.title = this.goods.title
      product.desc = this.goods.desc
      product.price = this.goods.realPrice
      product.iid = this.iid

      // 2.发送数据
      this.$store.dispatch('addCart', product)
    }
  },
  created() {
    this.iid = this.$route.params.id
    goodsDetail(this.iid).then(res => {
      //1.获取返回数据
      const data = res.result
      //2.轮播展示数据
      this.topImages = data.itemInfo.topImages
      //3.商品描述信息
      this.goods = new Goods(
        data.itemInfo,
        data.columns,
        data.shopInfo.services
      )
      //4.店铺信息
      this.shop = new Shop(data.shopInfo)
      //5.商品图片信息
      this.detailInfo = data.detailInfo
      //6.获取商品参数
      this.paramsInfo = new GoodsParam(
        data.itemParams.info,
        data.itemParams.rule
      )
      //7.评论信息
      if (data.rate.cRate !== 0) {
        this.commentInfo = data.rate.list[0]
      }

      // 数据传递完毕,Dom被渲染后会,会回调的方法
      // 缺点,dom被渲染了,但是图片并没有被渲染
      // this.$nextTick(() => {
      //   // 图片渲染完毕后,动态获取元素的offsetTop值
      //   this.offsetTopY.push(0)
      //   this.offsetTopY.push(this.$refs.paramsInfo.$el.offsetTop)
      //   this.offsetTopY.push(this.$refs.comment.$el.offsetTop)
      //   this.offsetTopY.push(this.$refs.recommend.offsetTop)
      //   console.log(this.offsetTopY)
      // })
    })
    getRecommend().then(res => {
      //8.推荐商品
      this.recommend = res.data.list
    })
  },
  //混入
  mixins: [itemImglistener, backTop],
  destroyed() {
    this.$bus.$off('imgLoad', this.itemImglistener)
  }
}
</script>

<style type="text/css" scoped>
.detail {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.content {
  flex: 1;
  overflow: hidden;
}
</style>
